<template>
   <div>
     <div><search-item v-on:searchParams="getSearchParams"></search-item></div>
     <div class="mt20">
       <div class="common-total-tag">共计充值金额{{currentTotalMoney}}元</div>
       <el-table
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="拼命加载中"
          :data="tableData"
          size="mini"
          >
            <el-table-column
            prop="order_num"
            label="交易流水号"
            width="260"
           >
            </el-table-column>
            <el-table-column
             width="120"
            prop="account_bo"
            label="用户手机"
           >
          </el-table-column>
          <el-table-column
          label="用户ID">
            <template slot-scope="scope">
              <router-link class="common-blue-color" :to="{ name: 'home', params: { userId: 123 }}">{{scope.row.userNum_bo}}</router-link>
            </template>
          </el-table-column>
          <el-table-column
          prop="userNickName_bo"
          label="用户昵称">
          </el-table-column>
          <el-table-column
          prop="source"
          label="来源">
           <template slot-scope="scope">
          {{scope.row.source==='1'?'PC':(scope.row.source==='2'?'Android':(scope.row.source==='3'?'IOS':'WEB'))}}
          </template>
          </el-table-column>
          <el-table-column
          label="交易金额(元)">
          <template slot-scope="scope">
          {{(scope.row.money/100).toFixed(2)}}
          </template>
          </el-table-column>
          <el-table-column
          prop="order_time"
          width="150"
          label="交易提交时间">
          </el-table-column>
          <el-table-column
          prop="pay_method"
          label="支付渠道">
           <template slot-scope="scope">
          {{scope.row.pay_method==='1'?'支付宝':(scope.row.source==='2'?'微信支付':'苹果支付')}}
          </template>
          </el-table-column>
          <el-table-column
           width="150"
          prop="success_time"
          label="支付到账时间">
          </el-table-column>
          <el-table-column
          label="支付状态">
            <template slot-scope="scope">
              {{scope.row.order_status==='1'?'支付成功':(scope.row.order_status==='2'?'支付失败':'待支付')}}
          </template>
          </el-table-column>
          <el-table-column
          label="操作">
          <template  slot-scope="scope">
           <el-button type="text" size="mini" @click="getTrade(scope.row)">对账</el-button>
          </template>
          </el-table-column>
          </el-table>
     </div>
     <div class="block mt10 tc mb10">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
      <br>
     </div>
     <!--弹窗-->
     <common-dialog title="对账" width="40%" :base-dialog="dialogFormVisible">
       <div slot="body">
         <div>{{dialogTableData}}
           <div class="dialog-common-title">以下为平台数据</div>
           <div class="mt10">
             <p>交易流水号：{{dialogTableData.order_num}}</p>
             <p>交易金额：{{(dialogTableData.money/100).toFixed(2)}}</p>
             <p>交易时间：{{dialogTableData.order_time}}</p>
             <p>支付渠道：{{dialogTableData.pay_method==='1'?'支付宝':(dialogTableData.source==='2'?'微信支付':'苹果支付')}}</p>
             <p>交易状态：{{dialogTableData.order_status==='1'?'支付成功':(dialogTableData.order_status==='2'?'支付失败':'待支付')}}</p>
           </div>
         </div>
         <div class="mt10">
           <div class="dialog-common-title">以下为支付接口返回数据</div>
           <div class="mt10">
             <p>交易结果：订单未支付或者已经关闭</p>
             <p>交易金额：-</p>
             <p>交易时间：2017-12-04  14:34:34</p>
             <p>流水号：2017-12-04  14:34:34</p>
           </div>
         </div>
         <div class="tc mt20">
           <el-button type="primary" size="medium" :disabled="isDisabled" @click="checkPayment">冲正</el-button>
           <el-button @click="dialogFormVisible=false" size="medium">取消</el-button>
         </div>
       </div>
     </common-dialog>
     <!--弹窗-->
   </div>
</template>
<script>
import service from '@/service';
import searchItem from './rechargeSearch';
import commonDialog from "@/components/Common/CommonDialog";
export default {
    data(){
        return {
          tableData:[],
          loading:true,
          page:1,
          pageSize:20,
          total:0,
          totalParams:{},
          dialogFormVisible:false,
          dialogTableData:{},
          isDisabled:true,
          currentTotalMoney:0
        }
    },
    mounted(){
      this.getQueryDataList();
    },
    methods:{
      getSearchParams(params){
        this.totalParams = params;
        this.getQueryDataList();
      },
      async  getQueryDataList(page=1){
        let params = {
          source:this.totalParams.source,
          userid:'',
          startMoney:this.totalParams.beginMoney*1000,
          endMoney:this.totalParams.endMoney*1000,
          selecttype:this.totalParams.usersType,
          selectvalue:this.totalParams.usersTypeCount,
          startDate:this.totalParams.startDate,
          endDate:this.totalParams.endDate,
          isjs:'',
          zfqd:this.totalParams.paymentChannel,
          jyzt:this.totalParams.dealStatus,
          page:page,
          pageSize:this.pageSize
        }
        //console.log(JSON.stringify(params));
        let res =await service.haiBeiServerQueryDataList(params);
        if(res.success){
          this.tableData=res.result.data.pageList;
          this.loading=false;
          this.page = res.result.data.page;
          this.total = res.result.data.nums;
          //this.currentTotalMoney = res.result.data;  统计当前筛选条件下，充值金额的总和
        }
      },
      handleCurrentChange(val){
        this.getQueryDataList(val);
      },
      getTrade(data){
        this.dialogFormVisible=true;
        this.dialogTableData = data;
        return;
        //支付接口暂时测试了
        service.haiBeiServerTradePay({id: data.order_num}).then( res => {
          if(res.success){
            this.dialogFormVisible=true;
            this.dialogTableData = data;
            //冲正
            if(res.result.trade_status===true&&data.order_status===1){
              this.isDisabled = false;
            }
          }else{
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        });
      },
      //冲正
      checkPayment(){
        service.haiBeiServerTradeCorrect({id: '2002',trade_no:'111'}).then( res => {
          if(res.success){
            this.dialogFormVisible=true;
            this.dialogTableData = data;
            //冲正
            if(res.result.trade_status===true&&data.order_status===1){
              this.isDisabled = false;
            }
          }else{
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        });
      }
    },
    components:{
      searchItem,
      commonDialog
    }

}
</script>

